<template>
	<view>

		<view  v-if="sortType == 1"  class="b-radius-5 bg-color-f9 goodbox  justify-around ">

				<view @click="clickGood(item)"  v-for="(item, index) of list" :key="index" class="item2">
					<view class="flex flex-col">
							<image class="product-img flex  f-s-0   bg-img b-radius-5" :style="item[imageSrcKey] | bgimg(400)+''" mode="widthFix" >
						<view class=" flex flex-row f-j-s item-center f-a-c " >
							<text v-if="item.type == 2" class="f10-size bg-color-linear-r t-color-w b-radius-2 h-16 padding-lr5 margin-r6">{{i18n['秒杀']}}</text>
							<text v-if="item.type == 3" class="f10-size bg-color-linear-y t-color-w b-radius-2 h-16 padding-lr5 margin-r6">{{i18n['拼团']}}</text>
	                        <view  v-if="item.attr == 1" class=" flex  flex-row myicon myicon-guahaokanbing f12-size margin-r6 t-color-g  items-center justify-start">宠物医疗</view>
							<view class=" f-a-c f-s-1 f-j-s     f12-size  justify-start items-start ellipsis-multiline margin-t6 margin-b4"  >
							{{item.title}}</view>


						</view>
						<!-- <view class="flex  f-w margin-t4">
							<view class="flex f-a-c f10-size padding-lr5 h-16 b-color-r t-color-r b-ra111
							dius-2 margin-r8">
								官方放心购</view>
						</view> -->
						<view v-if="!isRoleGoods" class="flex f-a-c f-j-s margin-t4">
							<view class="text-price f16-size f-w-b t-color-p">{{item.price | price}}</view>
							<view class="t-color-8 f12-size flex f-a-c">
								<text class="margin-r4"> {{item.commentNum}}</text>
								<text>{{i18n['评价']}}</text>
							</view>
					 </view>
						<view v-else class="flex f-a-c  margin-t4">
							<view class="text-price-role f16-size f-w-b t-color-p">{{item.point}}</view>
							<view v-if="item.price > 0" class=" f16-size f-w-b t-color-p padding-lr2">+</view>
							<view v-if="item.price > 0" class="text-price f16-size f-w-b t-color-p">{{item.price | price}}</view>
						</view>
					</view>

			  </view>



		</view>
		<custom-waterfalls-flow :value="list" @wapperClick="clickGood" @imageClick="clickGood" v-if="sortType == 4"  :columnSpace="offset" :imageKey="imageSrcKey"	:column="cols"  >
			<!--  #ifdef  MP-WEIXIN -->
			<!-- 微信小程序自定义内容 -->
			<view v-for="(item, index) of list" :key="index" slot="slot{{index}}">
				<view class="padding-12">
					<view class="line2">
						<text v-if="item.type == 2" class="f10-size bg-color-linear-r t-color-w b-radius-2 h-16 padding-lr5 margin-r6">{{i18n['秒杀']}}</text>
						<text v-if="item.type == 3" class="f10-size bg-color-linear-y t-color-w b-radius-2 h-16 padding-lr5 margin-r6">{{i18n['拼团']}}</text>
							<text class="flex f-a-c f-j-c myicon myicon-guahaokanbing f24-size margin-r6 "></text><text>{{item.title}}</text>


					</view>
					<!-- <view class="flex  f-w margin-t4">
						<view class="flex f-a-c f10-size padding-lr5 h-16 b-color-r t-color-r b-radius-2 margin-r8">
							官方放心购</view>
					</view> -->
					<view v-if="!isRoleGoods" class="flex f-a-c f-j-s margin-t4">
						<view class="text-price f16-size f-w-b t-color-p">{{item.price | price}}</view>
						<view class="t-color-8 f12-size flex f-a-c">
							<text class="margin-r4"> {{item.commentNum}}</text>
							<text>{{i18n['评价']}}</text>
						</view>
				 </view>
				 <view v-else class="flex f-a-c  margin-t4">
				 	<view class="text-price-role f16-size f-w-b t-color-p">{{item.point}}</view>
				 	<view v-if="item.price > 0" class=" f16-size f-w-b t-color-p padding-lr2">+</view>
				 	<view v-if="item.price > 0" class="text-price f16-size f-w-b t-color-p">{{item.price | price}}</view>
				 </view>
				</view>
			</view>
			<!--  #endif -->

			<!-- #ifndef  MP-WEIXIN -->
			<!-- app、h5 自定义内容 -->
			<template v-slot:default="item">
				<view class="padding-12">
					<view class="line2">
						<text v-if="item.type == 2" class="f10-size bg-color-linear-r t-color-w b-radius-2 h-16 padding-lr5 margin-r6">{{i18n['秒杀']}}</text>
						<text v-if="item.type == 3" class="f10-size bg-color-linear-y t-color-w b-radius-2 h-16 padding-lr5 margin-r6">{{i18n['拼团']}}</text>
							<text  v-if="item.attr == 1" class=" myicon myicon-guahaokanbing f12-size margin-r6 t-color-g ">宠物医疗</text>
						<view class="flex f-a-c  h-30 b-radius-30   f12-size " >
						<text class="">{{item.title}}</text>
						<!-- <text  v-if="item.attr == 1" class=" myicon myicon-guahaokanbing f12-size margin-l6 t-color-g ">宠物医疗</text> -->
						</view>

						<!-- <text>{{item.title}}</text> -->
						<!-- <text   class="flex f-a-c f-j-c h-16 b-radius-30 t-color-w bg-color-g  myicon myicon-guahaokanbing f24-size margin-r6 " v-if="item.attr == 1" ></text> -->
					</view>
					<!-- <view class="flex  f-w margin-t4">
						<view class="flex f-a-c f10-size padding-lr5 h-16 b-color-r t-color-r b-radius-2 margin-r8">
							官方放心购</view>
					</view> -->
					<view v-if="!isRoleGoods" class="flex f-a-c f-j-s margin-t4">
						<view class="text-price f16-size f-w-b t-color-p">{{item.price | price}}</view>
						<view class="t-color-8 f12-size flex f-a-c">
							<text class="margin-r4"> {{item.commentNum}}</text>
							<text>{{i18n['评价']}}</text>
						</view>
				 </view>
					<view v-else class="flex f-a-c  margin-t4">
						<view class="text-price-role f16-size f-w-b t-color-p">{{item.point}}</view>
						<view v-if="item.price > 0" class=" f16-size f-w-b t-color-p padding-lr2">+</view>
						<view v-if="item.price > 0" class="text-price f16-size f-w-b t-color-p">{{item.price | price}}</view>
					</view>
				</view>
			</template>
			<!-- #endif -->
		</custom-waterfalls-flow>
		<view @click="clickGood(item)" v-if="sortType == 2" v-for="(item, index) of list" :key="index" class="b-radius-5 bg-color-w flex margin-t10">
			<view class="flex  f-s-0 w-120 h-120 bg-img b-radius-5" :style="item[imageSrcKey] | bgimg(400)+''"></view>
			<view class="flex flex-1 f-c f-j-s padding-10">
				<view class="flex flex-1 f-c">
					<view class="line2">
						<text v-if="item.type == 2" class="f10-size bg-color-linear-r t-color-w b-radius-2 h-16 padding-lr5 margin-r6">{{i18n['秒杀']}}</text>
						<text v-if="item.type == 3" class="f10-size bg-color-linear-y t-color-w b-radius-2 h-16 padding-lr5 margin-r6">{{i18n['拼团']}}</text>
						<text class="">{{item.title}}</text>
					</view>
					<!-- <view class="flex  f-w margin-t4">
						<view class="flex f-a-c f10-size padding-lr5 h-16 b-color-r t-color-r b-radius-2 margin-r8">官方放心购
						</view>
					</view> -->
				</view>
				<view v-if="!isRoleGoods" class="flex f-a-c f-j-s margin-t4">
					<view class="text-price f16-size f-w-b t-color-p">{{item.price | price}}</view>
					<view class="t-color-8 f12-size flex f-a-c">
						<text class="margin-r4"> {{item.commentNum}}</text>
						<text>{{i18n['评价']}}</text>
					</view>
				</view>
				<view v-else class="flex f-a-c  margin-t4">
					<view class="text-price-role f16-size f-w-b t-color-p">{{item.point}}</view>
					<view v-if="item.price > 0" class=" f16-size f-w-b t-color-p padding-lr2">+</view>
					<view v-if="item.price > 0" class="text-price f16-size f-w-b t-color-p">{{item.price | price}}</view>
				</view>
			</view>
		</view>
		<view  v-if="sortType == 3"  class="b-radius-5 bg-color-w goodbox">


				<view @click="clickGood(item)"  v-for="(item, index) of list" :key="index" class="item">

								<image
								  class="good_img"
								  :src="item[imageSrcKey]"
								/>
								<text class="self-center good_title">{{item.title}}</text>
								<view class=" good_c">
								  <text class="text_price">价格：</text>
								  <text class="text_price_u">￥</text>
									<text class="font_1 text_10">{{item.price | price}}</text>
								</view>


			  </view>



		</view>
	</view>
</template>
<style scoped lang="scss">

.goodbox{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.goodbox .item{

	background:#ffffff;
	/* 方法一 */
	flex: 1;
	/* height: 50px; */
	padding: 10rpx;
	/* background-color: #999; */
	/* width: calc((100% - 10px) / 3);// 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整 */
	min-width: calc((100% - 10px) / 3);// 加入min-width、max-width后每个child的宽度就生效了
	max-width: calc((100% - 10px) / 3);

	/* 方法二 */
	/*
		height: 50px;
		margin: 0 5px 5px 0;
		box-sizing: border-box;
		background-color: #999;
		flex: 0 0 calc((100% - 10px) / 3);
	*/
}

.goodbox .item2{

margin:10rpx 5rpx 10rpx 10rpx;
	background:#ffffff;
	/* 方法一 */
	// flex: 1;
	/* height: 50px; */
	padding: 10rpx;
	/* background-color: #999; */
	/* width: calc((100% - 10px) / 3);// 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整 */
	width: calc((100% - 30rpx) / 2);// 加入min-width、max-width后每个child的宽度就生效了
	// width: calc((100% - 24px) / 2);

	/* 方法二 */
	/*
		height: 50px;
		margin: 0 5px 5px 0;
		box-sizing: border-box;
		background-color: #999;
		flex: 0 0 calc((100% - 10px) / 3);
	*/
}
.goodbox .item2 .product-img {
			width:100%;
			height: calc(50vw - 20upx) !important;
			display: block;
		}

.goodbox .item:nth-child(3n+2){
	padding: 10rpx;
	/* margin-right: 0;// 去除第3n个的margin-right */
}

.goodbox .good_img {
  overflow: hidden;
  width: 220rpx;
  height: 214rpx;
}
.good_title{
  font-size: 24rpx;
  font-family: HarmonyOSSansSC;
  line-height: 1.5;
  color: #081329;
  height:70rpx;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;//文本溢出显示省略号
}

.good_c {
  /* padding: 0 20rpx; */
}
.text_price {
  font-size: 24rpx;
  font-family: HarmonyOSSansSC;
  line-height: 15rpx;
  color: #666e7a;
}
.text_price_u {
  font-size: 16rpx;
  font-family: HarmonyOSSansSC;
  line-height: 12rpx;
  color: #ff5733;
}
.group_6 {
  line-height: 24rpx;
  height: 24rpx;
}
.font_6 {
  font-size: 32rpx;
  font-family: HarmonyOSSansSC;
  line-height: 24rpx;
  color: #ff5733;
}
.text_10 {
  word-break: break-all;
}

</style>

<script>
	const $ = require('@/utils/api.js');
	export default {
		props: {
			list: {
				type: Array,
				required: true
			},
			// offset 间距，单位为 px
			offset: {
				type: Number,
				default: 1.2
			},
			sortType: {
				type: Number,
				default: 1
			},
			// 列表渲染的 key 的键名，值必须唯一，默认为 id
			idKey: {
				type: String,
				default: "id"
			},
			// 图片 src 的键名
			imageSrcKey: {
				type: String,
				default: "mainImg"
			},
			// 列数
			cols: {
				type: Number,
				default: 2,
				validator: (num) => num >= 2
			},
			imageStyle: {
				type: Object
			},

			// 是否是单独的渲染图片的样子，只控制图片圆角而已
			single: {
				type: Boolean,
				default: false
			},
			isRoleGoods: {//是否是积分商品，默认不是
				type: Boolean,
				default: false
			},

			// #ifndef MP-WEIXIN
			listStyle: {
				type: Object
			},
			// #endif
		},
		data() {
			return {};
		},
		onLoad: function() {
			this.init();
		},
		methods: {
			clickGood(data) {
				if(data.type==11){
					$.go('/pages/goods/detail_pet?id='+data.id);
					return
				}
				if(!this.isRoleGoods) {
					$.go('/pages/goods/detail?id='+data.id);
				}else{
					$.go('/pages/shops/roleDetail?id='+data.id);
				}
			},
			init() {},
		},
		computed: {
			i18n() {
				return this.$t('goodsdetail')
			},
		},
		created() {
		},
		mounted() {},
		destroyed() {},
		components: {

		},
		onPullDownRefresh() {},
		onReachBottom() {}
	}
</script>
